<template>
  <div class="app-container">
    <el-button type="primary" @click="resetForm('ruleForm')" style="margin-bottom:20px">新增用户</el-button>
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        status-icon
        :rules="rules "
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="用户名"
          prop="username"
          :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }
                ]"
        >
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </div>
    </el-dialog>
    <el-table :data="userData" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="username" label="用户名" width="180" />
      <el-table-column prop="create_time" label="创建时间" />
      <el-table-column prop="update_time" label="修改时间" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="pageCount"
      @prev-click="getPrevList"
      @next-click="getNextClick"
      @current-change="getCurrentPage"
    />

    <el-dialog title="修改密码" :visible.sync="dialog.update.show">
      <el-form
        ref="numberValidateForm"
        :model="numberValidateForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="密码"
          prop="password"
          :rules="[
            { required: true, message: '密码不能为空'}
          ]"
        >
          <el-input v-model="numberValidateForm.password" type="password" autocomplete="off" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.update.show = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdateForm('numberValidateForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    // var checkUserName = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("用户名不能为空"));
    //   }
    // };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      pageCount: 0,
      userData: [],
      pageIndex: 1,
      pageSize: 10,
      newUserInfo: {
        username: "",
        password: ""
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      ruleForm: {
        username: "",
        pass: ""
      },
      rules: {
        pass: [{ required: true, validator: validatePass, trigger: "blur" }]
      },
      dialog: {
        update: {
          show: false
        }
      },
      numberValidateForm: {
        username: "",
        password: "",
        id: 0
      }
    };
  },
  created() {
    this.getUserList(this.pageIndex, this.pageSize);
  },
  methods: {
    getUserList(pageIndex, pageSize) {
      const data = { pageIndex: pageIndex, pageSize: 10 };
      this.$store
        .dispatch("user/getUserList", data)
        .then(response => {
          console.log(response)
          const { result } = response;
          this.pageCount = parseInt(result.pageCount) * 10;
          this.pageIndex = result.pageIndex;
          const userList = result.data;
          userList.forEach(item => {
            item.create_time = item.create_time
              .replace("T", " ")
              .replace("Z", " ");
            item.update_time = item.update_time
              .replace("T", " ")
              .replace("Z", " ");
            // item.create_time = item.create_time.replace('Z', ' ')
            // delete item.update_time
          });
          this.userData = userList;
        })
        .catch(() => {
          console.log("list err");
        });
    },
    getPrevList() {
      this.pageIndex--;
      this.getUserList(this.pageIndex, this.pageSize);
    },
    getNextClick() {
      this.pageIndex++;
      this.getUserList(this.pageIndex, this.pageSize);
    },
    getCurrentPage(page) {
      this.pageIndex = page;
      this.getUserList(this.pageIndex, this.pageSize);
    },
    addUser() {
      this.$store
        .dispatch("user/addUser", this.ruleForm)
        .then(response => {
          if (response.code == 200) {
            this.dialogFormVisible = false;
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.getUserList(this.pageIndex, this.pageSize);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addUser();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.dialogFormVisible = true;
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
      }
    },
    handleEdit(index, row) {
      this.dialog.update.show = true;
      this.numberValidateForm.id = row.id;
      console.log(index, row);
    },
    handleDelete(index, row) {
      this.$store
        .dispatch("user/deleteUser", row.id)
        .then(response => {
          if (response.code == 200) {
            this.dialogFormVisible = false;
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.getUserList(this.pageIndex, this.pageSize);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    updateUser() {
      this.$store
        .dispatch("user/updateUser", this.numberValidateForm)
        .then(response => {
          if (response.code == 200) {
            this.dialog.update.show = false;
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.getUserList(this.pageIndex, this.pageSize);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    submitUpdateForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.updateUser();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
</style>
